<template>
  <div class="ActivityDetail" v-if="activity.activityTable">
    <!-- <van-nav-bar title="活动详情" left-arrow @click-left="backHome" /> -->
    <nav-bar title="活动详情"></nav-bar>
    <div class="ActivityDetail-content wrap">
      <div class="ActivityDetail-content-title">
        {{ activity.activityTable.title }}
      </div>
      <!-- <div class="ActivityDetail-content-note">
        <div class="date" v-if="activity.activityTable.startTime">
          {{activity.activityTable.startTime.split(" ")[0]}}至{{activity.activityTable.endTime.split(" ")[0]}}
          <br />
        </div>
      </div>-->
      <img
        :src="imgUrl + activity.activityTable.titleImg"
        alt
        class="ActivityDetail-content-img"
      />
      <!-- <div class="contentTitle">活动信息</div> -->
      <myTitle title="活动信息"></myTitle>
      <div class="applyInfo">
        <div class="title">
          主办方：
          <span class="title-cont">{{ activity.activityTable.hostunit }}</span>
          <br />
        </div>
        <div class="title">
          活动地点：
          <span class="title-cont">{{
            activity.activityTable.address +
            activity.activityTable.addressDetail
          }}</span>
          <br />
        </div>
        <div class="title" v-if="activity.activityTable.startTime">
          活动时间：
          <span class="title-cont"
            >{{ activity.activityTable.startTime.split(" ")[0] }} 至{{
              activity.activityTable.endTime.split(" ")[0]
            }}</span
          >
          <br />
        </div>

        <div class="title">
          联系人：
          <span class="title-cont">{{ activity.activityTable.phone }}</span>
          <br />
        </div>
        <div class="title">
          联系方式：
          <span class="title-cont">{{ activity.activityTable.linkman }}</span>
        </div>
        <div class="title" v-if="activity.activityTable.applyStartTime">
          报名时间：
          <span class="title-cont"
            >{{ activity.activityTable.applyStartTime.split(" ")[0] }} 至{{
              activity.activityTable.applyEndTime.split(" ")[0]
            }}</span
          >
          <br />
        </div>
        <div class="title">
          报名费用：
          <span class="title-cont"
            >￥{{ activity.activityTable.price }}元/人</span
          >
          <br />
        </div>
        <div class="title">
          当前报名人数：
          <span class="title-cont">{{ applyNumber }}</span>
        </div>
      </div>
      <!-- <div class="contentTitle">活动详情</div> -->
      <myTitle title="活动详情"></myTitle>
      <p
        class="ActivityDetail-content-txt rih v-html-img"
        v-html="activity.activityTable.introduction"
      ></p>
      <!-- <div
        class="contentTitle"
      
      >嘉宾信息</div>-->
      <myTitle
        v-show="activity.activityGuestList && activity.activityGuestList.length"
        title="嘉宾信息"
      ></myTitle>
      <div class="guest">
        <div
          class="guestItem"
          v-for="(item, index) in activity.activityGuestList"
          :key="index"
        >
          <div class="guestImg">
            <img :src="imgUrl + item.guestImg" alt />
          </div>
          <div class="guestInfo">
            <div class="guestTitle">
              {{ item.guestType }}: {{ item.guestName }}
            </div>
            <div class="guestInfoText">{{ item.guestText }}</div>
          </div>
        </div>
      </div>
      <div class="ewm-title">活动二维码</div>
      <div class="qrCode">
        <div class="codeImg">
          <img :src="imgUrl + activity.activityTable.activityQrcode" alt />
        </div>
        <div class="text">分享给好友</div>
      </div>
    </div>
    <div class="ActivityDetail-ad">
      <div class="ActivityDetail-ad-title">
        报名费用：￥
        <span>{{ activity.activityTable.price }}</span>
      </div>
      <div
        @click="showDia"
        v-show="activity.activityTable.isTicket"
        class="ActivityDetail-ad-btn"
      >
        立即报名
      </div>
      <!-- @click="skipRouter({path:'/payTicket',query:{activityId:activityId}})" -->
      <div
        v-show="!activity.activityTable.isTicket"
        class="ActivityDetail-ad-btn"
        style="background: grey"
      >
        报名结束
      </div>
    </div>
    <van-dialog
      @confirm="skipRouter()"
      v-model="show"
      title="报名确认"
      show-cancel-button
      confirmButtonText="确认支付"
      cancelButtonText="再看看"
    >
      <div class="dia-box">
        <PayTicket ref="PayTicket"></PayTicket>
      </div>
    </van-dialog>
  </div>
</template>
<script>
import navBar from "@/components/NavBar";
import myTitle from "@/components/myTitle/index.vue";
import PayTicket from "@/views/PayTicket.vue";
export default {
  components: {
    navBar,
    PayTicket,
    myTitle,
  },
  name: "ActivityDetail",
  data() {
    return {
      show: false,
      activityId: "",
      activity: {
        activityTable: {},
        activityGuestList: [],
      },
      applyNumber: 0,
      imgUrl: config.imgUrl,
      showPort: {},
    };
  },
  methods: {
    showDia() {
      this.show = true;
    },
    backHome() {
      this.$router.back();
    },
    skipRouter(routerObj) {
      this.$refs.PayTicket.payTicket();
    },
    getActivityOne() {
      this.$request({
        url: "/activity/findActivityById",
        data: { activityId: this.activityId },
        method: "post",
      }).then((rsp) => {
        if (rsp.code === 200) {
          this.activity = rsp.data;
        } else {
          this.$toast.fail(rsp.content);
        }
      });
    },
    findActivityTicketRestrict() {
      this.$request({
        url: "/activity/activityTicketRestrict",
        data: { activityId: this.activityId, flag: 0 },
        method: "post",
      }).then((rsp) => {
        if (rsp.code === 200) {
          this.applyNumber = rsp.data.numberOfEnrolment;
        } else {
          this.$message.error(rsp.content);
        }
      });
    },
  },
  mounted() {
    this.activityId = this.$route.query.activityId;
    this.getActivityOne();
    this.findActivityTicketRestrict();
  },
};
</script>
<style scoped>
.rich >>> img {
  width: 100%;
  height: 100%;
}
</style>
<style lang='scss'>
@import "../assets/css/base";
.dia-box {
  padding: px2rem(60);
  .item {
    margin-bottom: 28px;
  }
  .zhushi {
    color: #666;
    font-size: px2rem(26);
    margin-bottom: 10px;
    line-height: 23px;
  }
  .dia-mn {
    margin-top: 15px;
    font-weight: bold;
    font-size: px2rem(30);
    color: #333;
  }
  .name-title {
    margin-bottom: px2rem(40);
    font-size: px2rem(28);
    color: #999;
  }
  .name {
    font-size: px2rem(32);
    color: #333;
    border-bottom: 1px solid #ededed;
    padding-bottom: px2rem(40);
  }
}
.ewm-title {
  margin-top: px2rem(70);
  font-size: px2rem(36);
  color: #312d2d;
  font-weight: bold;
  text-align: center;
}
.ActivityDetail {
  &-content {
    margin-bottom: px2rem(160);
    &-title {
      font-size: px2rem(40);
      color: #000000;
      font-weight: 500;
      margin: px2rem(44) auto px2rem(34);
      line-height: px2rem(52);
    }
    &-note {
      display: flex;
      margin-bottom: px2rem(20);
      & > .date {
        font-size: px2rem(28);
        color: rgba(0, 0, 0, 0.5);
        font-weight: 400;
      }
      & > .fire {
        @include bgImg(
          px2rem(130),
          px2rem(24),
          "../assets/img/activity/fire.png"
        );
        font-size: px2rem(24);
        background-position: left center;
        padding-left: px2rem(26);
        color: #ff2d5e;
        margin-left: px2rem(67);
        margin-bottom: px2rem(37);
      }
    }
    &-img {
      width: 100%;
      border-radius: px2rem(12);
    }
    &-txt {
      font-size: px2rem(24);
      color: #000000;
      line-height: 1.6;
      margin-bottom: px2rem(60);
    }
    .contentTitle {
      font-size: px2rem(36);
      color: $mainColor;
      margin: px2rem(20) 0;
    }
    .applyInfo {
      font-size: px2rem(32);
      color: #323233e0;
      & > div {
        // line-height: px2rem(40);
      }
      .title-cont {
        color: #666666;
        font-size: px2rem(28);
        font-weight: 400;
      }
      .title {
        color: #312d2d;
        font-size: px2rem(32);
        margin-bottom: px2rem(38);
        font-weight: bold;
      }
    }
    .guest {
      .guestItem {
        display: flex;
        margin-bottom: px2rem(20);
        .guestImg {
          width: 30%;
          & > img {
            width: px2rem(200);
            height: px2rem(224);
            border-radius: 6px;
          }
        }
        .guestInfo {
          padding-left: px2rem(30);
          .guestTitle {
            font-size: px2rem(36);
            font-weight: bold;
            color: #312d2d;
          }
          .guestInfoText {
            padding-top: px2rem(20);
            font-size: px2rem(26);
            line-height: 24px;
            color: #666;
          }
        }
      }
    }
    .qrCode {
      position: relative;
      text-align: center;
      .codeImg {
        & > img {
          width: px2rem(240);
          height: px2rem(240);
        }
      }
      .text {
        position: absolute;
        left: 0;
        right: 0;
        font-size: px2rem(32);
        top: px2rem(210);
      }
    }
  }
  &-ad {
    position: fixed;
    bottom: 0;
    // @include bgImg(100%, px2rem(90), "../assets/img/activity/ad-bg.png");
    width: 100%;
    background-color: #fff;
    box-shadow: 0 0 13px 0 rgba(18, 27, 83, 0.07);
    height: px2rem(100);
    &-title {
      font-size: px2rem(28);
      color: #323233cc;
      position: absolute;
      left: 30%;
      top: 50%;
      transform: translate(-50%, -50%);
      & > span {
        color: red;
        font-size: px2rem(40);
      }
    }
    &-btn {
      position: absolute;
      right: 0;
      background: $mainColor;
      text-align: center;
      line-height: px2rem(100);
      font-size: px2rem(32);
      color: #fff;
      padding: 0px px2rem(40);
    }
  }
}
</style>
